<template>
  <div>
    <div class="close-btn" @click="openFunc" :class="isOpen ? 'ishide' : 'isshow'"></div>
    <div class="actual-left" :class="isInit ? ( isOpen ? 'myopen' : 'myclose') : css">
      <div class="box">
        <template v-if="leftstyle === 'actual'">
          <actual></actual>
        </template>
        <template v-if="leftstyle === 'yearactual'">
          <year-actual></year-actual>
        </template>
        <template v-if="leftstyle === 'weightstat'">
          <weight-stat></weight-stat>
        </template>
        <template v-if="leftstyle === 'pointdetect'">
          <point-detect></point-detect>
        </template>
      </div>
      <div class="open-btn" @click="openFunc"></div>
    </div>
  </div>

</template>

<script>
import actual from '@/components/MyLeftPage/actual'
import yearActual from '@/components/MyLeftPage/yearActual'
import weightStat from '@/components/MyLeftPage/weightStat'
import pointDetect from '@/components/MyLeftPage/pointDetect'
export default {
  name: "MyLeftPage",
  components: {
    actual,
    yearActual,
    weightStat,
    pointDetect
  },
  created() {
  },
  data() {
    return {
      /*左侧动画，首次加载不触发*/
      isInit: false,
    }
  },
  props: {
    css: {
      type: String,
      default: 'hide'
    },
    isOpen: {
      type: Boolean,
      default: true
    },
    leftstyle:{
      type: String,
      default: 'actual'
    }
  },
  methods: {
    openFunc () {
      /*左侧收缩事件*/
      this.isInit = true
      this.$emit('openFunc')
    },
  }
}
</script>

<style scoped lang="scss">
/*左侧收起展开按钮动画*/
@keyframes myopen {
  from{
    width: 0px;
  }
  to{
    width: 602px;
  }
}
@keyframes myclose {
  from{
    width: 602px;
  }
  to{
    width: 0px;
  }
}
/*左侧背景下的隐藏按钮*/
@keyframes isshow {
  0%{
    opacity: 0;
  }
  99%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

/*左侧显示隐藏*/
/*按钮*/
.close-btn{
  position: absolute;
  width: 16px;
  height: 130px;
  margin-top: -65px;
  left: 0px;
  top: 50%;
  background: url("~@/assets/image/close-btn.png") no-repeat center;
  background-size: cover;
  cursor: pointer;
}
.myopen{
  animation-name:myopen;
  animation-duration:500ms;
  animation-timing-function:linear;
  animation-iteration-count:1;
  animation-fill-mode:both;
}
.myclose{
  animation-name:myclose;
  animation-duration:500ms;
  animation-timing-function:linear;
  animation-iteration-count:1;
  animation-fill-mode:both;
}
/*左侧隐藏按钮显示隐藏*/
.isshow{
  animation-name:isshow;
  animation-duration:500ms;
  animation-timing-function:linear;
  animation-iteration-count:1;
  animation-fill-mode:both;
}
.ishide{
  opacity: 0;
}

.actual-left {
  background-color: #172349;
  width: 602px;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  top: 90px;
  overflow: hidden;

  .box {
    // background: #00000099 url("~@/assets/image/actual-left.png") no-repeat center;
    background-size: cover;
    box-sizing: border-box;
    width: 598px;
    height: 100%;

  }


  .open-btn {
    position: absolute;
    width: 16px;
    height: 130px;
    margin-top: -65px;
    right: 0px;
    top: 50%;
    background: url("~@/assets/image/open-btn.png") no-repeat center;
    background-size: cover;
    cursor: pointer;
  }
}
.hide{
  display: none;
}
.show{
  display: block;
}
</style>
